.button {
    --default: rgba(255, 255, 255, .2);
    --active: #fff;
    position: relative;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transform: scale(var(--s, 1));
    transition: transform .2s;
    &:active {
        --s: .96;
    }
    svg {
        display: block;
        fill: none;
        stroke-width: var(--sw, 3px);
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .circle {
        width: 76px;
        height: 76px;
        transform: rotate(-90deg);
        circle {
            &.default {
                stroke: var(--default);
            }
            &.active {
                stroke: var(--active);
                stroke-dasharray: 227px;
                stroke-dashoffset: var(--active-offset, 227px);
                transition: stroke-dashoffset var(--all-transition, 4s) ease var(--all-delay, .8s);
            }
        }
    }
    span {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: 13px;
        font-weight: 500;
        font-size: 10px;
        color: var(--active);
        opacity: var(--count-opacity, 0);
        transform: translateY(var(--count-y, 4px));
        animation: var(--count, none) .3s ease forwards var(--all-delay, 4.6s);
        transition: opacity .2s ease .6s, transform .3s ease .6s;
    }
    .icon {
        --sw: 2px;
        width: 24px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -20px 0 0 -12px;
        svg {
            &.line {
                width: 4px;
                height: 37px;
                stroke: var(--active);
                position: absolute;
                left: 10px;
                top: 0;
                stroke-dasharray: 0 33px var(--line-array, 33px) 66px;
                stroke-dashoffset: var(--line-offset, 33px);
                transform: translateY(var(--line-y, 0));
                opacity: var(--line-opacity, 1);
                transition: stroke-dasharray .2s, stroke-dashoffset .2s, transform .32s ease var(--all-delay, .25s);
            }
        }
        div {
            width: 40px;
            height: 32px;
            position: absolute;
            overflow: hidden;
            left: 50%;
            bottom: 1px;
            margin-left: -20px;
            transform: translate(var(--icon-x, 0), var(--icon-y, 0));
            transition: transform .3s ease var(--all-delay, 4.8s);
            animation: var(--overflow, none) 0s linear forwards var(--all-delay, 4.8s);
            &:before,
            &:after {
                content: '';
                position: absolute;
                z-index: 1;
                height: 2px;
                left: var(--l, 0);
                top: 15px;
                width: var(--w, 16px);
                background: var(--active);
                border-radius: 1px;
                transform-origin: var(--tx, 15px) 1px;
                transform: rotate(var(--before-rotate, 0deg));
                opacity: var(--tick-opacity, 0);
                transition: transform .4s ease var(--all-delay, 4.8s), opacity 0s linear var(--all-delay, 4.8s);
            }
            &:after {
                --l: 14px;
                --w: 26px;
                --tx: 1px;
                transform: rotate(var(--after-rotate, 0deg));
            }
            svg {
                stroke: var(--active);
                &.arrow {
                    width: 40px;
                    height: 32px;
                    opacity: var(--arrow-opacity, 1);
                    transition: opacity 0s linear var(--all-delay, 1s);
                }
                &.progress {
                    width: 444px;
                    height: 10px;
                    position: absolute;
                    left: 0;
                    top: 11px;
                    transform: translateX(var(--progress-x, 0));
                    opacity: var(--progress-opacity, 0);
                    transition: transform var(--all-transition, 4.4s) ease var(--all-delay, .4s), opacity 0s linear var(--all-delay, 1s);
                    animation: var(--hide, none) 0s linear forwards var(--all-delay, 4.8s);
                }
            }
        }
    }
    &.loading:not(.reset) {
        --line-y: -36px;
        --line-array: 0;
        --line-offset: 15px;
        --active-offset: 0;
        --arrow-opacity: 0;
        --progress-opacity: 1;
        --progress-x: -400px;
        --tick-opacity: 1;
        --before-rotate: 47deg;
        --after-rotate: -46deg;
        --hide: hide;
        --overflow: overflow;
        --icon-x: 2px;
        --icon-y: 7px;
        --count-opacity: 1;
        --count-y: 0;
        --count: count;
    }
    &.reset {
        --all-delay: 0s;
        --all-transition: .3s;
    }
}

@keyframes hide {
    to {
        opacity: 0;
    }
}

@keyframes count {
    to {
        transform: translateY(4px);
        opacity: 0;
    }
}

@keyframes overflow {
    to {
        overflow: visible;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// dribbble & twitter
   body {
       min-height: 100vh;
       font-family: 'Inter', 'Inter UI', Arial;
       display: flex;
       justify-content: center;
       align-items: center;
       background: #275EFE;
       font-family: 'Roboto', Arial, sans-serif;
       .dribbble {
           position: fixed;
           display: block;
           right: 20px;
           bottom: 20px;
           img {
               display: block;
               width: 76px;
           }
       }
       .twitter {
           position: fixed;
           display: block;
           right: 112px;
           bottom: 14px;
           svg {
               width: 24px;
               height: 24px;
               fill: white;
           }
       }
   }